<template>
  <div>
    <div class="list-box">
      <div class="list-item" v-for="(item, index) in list" :key="index">
        <!-- 选择按钮 -->
        <div
          class="info"
          @click="checked(item, item.dep.parent_id)"
          :style="{ marginLeft: (item.dep.depth - 1) * 10 + 'px' }"
        >
          <div
            @click.stop="choose(item, item.dep.parent_id, item.dep.depth)"
            class="chose-icon"
            v-if="
              (!single || (single && !item.children)) && item.dep.type === 5
            "
          >
            <img src="./static/yes.png" class="icon" v-if="item.choose" />
            <img src="./static/no.png" class="icon" v-if="!item.choose" />
          </div>
          <span class="title">{{ item.dep.name }}</span>
          <div v-if="item.children">
            <img src="./static/open.png" v-if="item.check" class="icon" />
            <img src="./static/close.png" v-if="!item.check" class="icon" />
          </div>
        </div>
        <div v-if="item.children" class="child-box">
          <List
            v-show="item.check"
            :list="item.children"
            :single="single"
          ></List>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
/*
    
    list：deepTree结构的数据，如analogData中导出的数据
    single：为单选多选控制器

    注意：本数据为项目开发的测试数据，具体需求可根据自己需求适配

*/
export default {
  props: {
    list: {
      typeof: Array,
      default: () => {
        return []
      },
    },
    single: {
      typeof: Boolean,
      default: false,
    },
  },
  name: 'List',
  data() {
    return {
      //记录被选中
      chooseRes: [],
    }
  },
  methods: {
    //选择
    choose(item, id, depth) {
      let deepTree = this.$parent
      if (item.choose) {
        this.$set(item, 'choose', false)
        let local = JSON.parse(localStorage.getItem('chooseClass'))
        local = local.filter((loc) => {
          return loc.dep.id !== item.dep.id
        })
        localStorage.setItem('chooseClass', JSON.stringify(local))
        this.unChooseAllChild(item)
        this.unChooseFor(this.$parent, id)
        //移除
      } else {
        this.$set(item, 'choose', true)
        //有孩子选定素有孩子
        this.chooseAllChild(item, id)
        this.chooseFor(this.$parent, id)
        //单选执行
        if (this.single) {
          //获取跟数组
          for (let i = 2; i < depth; i++) {
            deepTree = deepTree.$parent
          }
          //取消所有选择
          deepTree.list.forEach((deep) => {
            this.$set(deep, 'choose', false)
            this.clearnOrCheck(deep)
          })
          //清空选中数组
          this.chooseRes = []
          //选中自己
          this.$set(item, 'choose', true)
          this.chooseRes.push(item)
        }
        let local = JSON.parse(localStorage.getItem('chooseClass'))
        local.push(item)
        localStorage.setItem('chooseClass', JSON.stringify(local))
      }
      if (this.chooseRes.length) {
        localStorage.setItem('chooseClass', JSON.stringify(this.chooseRes))
      }
      let local = JSON.parse(localStorage.getItem('chooseClass'))
      // console.log(local)
    },
    //递归清楚
    clearnOrCheck(deep) {
      if (deep.children) {
        deep.children.forEach((temp) => {
          this.$set(temp, 'choose', false)
          this.clearnOrCheck(temp)
        })
      }
    },
    //递归选中父亲
    chooseFor(parent, id) {
      const list = parent.list
      //找到父亲
      const currentPar = list.filter((par) => {
        return par.dep.id == id
      })
      if (!currentPar[0]?.children) {
      } else {
        const res = currentPar[0].children.every((child) => {
          return child.choose == true
        })
        if (res) {
          this.$set(currentPar[0], 'choose', true)
          this.chooseFor(parent.$parent, currentPar[0].dep.parent_id)
        }
      }
    },
    //递归清除
    unChooseFor(parent, id) {
      const list = parent.list
      //找到父亲
      const currentPar = list.filter((par) => {
        return par.dep.id == id
      })
      if (!currentPar[0]?.children) {
      } else {
        const res = currentPar[0].children.some((child) => {
          return child.choose == false
        })
        if (res) {
          this.$set(currentPar[0], 'choose', false)
          this.unChooseFor(parent.$parent, currentPar[0].dep.parent_id)
        }
      }
    },
    //展开
    checked(item, id) {
      if (item.check) {
        this.$set(item, 'check', false)
      } else {
        // const parent = this.$parent.list
        // // parent.forEach((par) => {
        // //   if (par.children) {
        // //     par.children.forEach((child) => {
        // //       this.$set(child, 'check', false)
        // //     })
        // //   } else {
        // //     this.$set(item, 'check', true)
        // //   }
        // // })
        this.$set(item, 'check', true)
      }
    },
    //选中所有孩子
    chooseAllChild(item) {
      if (item.children) {
        item.children.forEach((child) => {
          this.$set(child, 'choose', true)
          if (child?.children) {
            this.chooseAllChild(child)
          }
        })
      }
    },
    //取消所有孩子
    unChooseAllChild(item) {
      if (!item.children) return
      item.children.forEach((child) => {
        this.$set(child, 'choose', false)
        if (child?.children) {
          this.unChooseAllChild(child)
        }
      })
    },
    //判断孩子受否被完全选中
    checkChooseChild(item) {
      if (!item.children) return
      item.children.forEach((child) => {
        if (child.choose == false) {
          return
        } else {
          if (child?.children) {
            this.checkChooseChild(child)
          }
        }
      })
    },
    //查找所有选中得信息
    findCheckList() {
      this.list.forEach((item) => {
        if (item.children !== null) {
          this.findCheckList(item.children)
        } else {
          if (item.check) {
            this.res.push(item)
          }
        }
      })
    },
  },
}
</script>

<style lang="less">
.list-box {
  display: flex;
  flex-direction: column;
  .list-item {
    .info {
      margin-top: 10px;
      overflow: hidden;
      animation: open 0.5s ease;
      display: flex;
      justify-content: space-around;
      align-items: center;
      .chose-icon {
        display: flex;
        padding-left: 20px;
        margin-right: -10px;
        padding: 0 10px;
      }
      .title {
        text-align: left;
        text-indent: 1em;
        flex: 1;
      }
      .icon {
        width: 20px;
      }
    }
  }
}
@keyframes open {
  0% {
    max-height: 0px;
  }

  100% {
    max-height: 40px;
  }
}
</style>
